<template>
  <div>

    <!--页头-->
    <el-row>
      <div class="div-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '' }">&#12288;&#12288;主页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          <el-breadcrumb-item>任务配置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-row>

    <!--数据表-->
    <el-row>
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <i class="kfb-icon-list-outline"></i>
          <span>用户列表</span>

        </div>
        <div class="block">
          <el-table
            :data="this.tableData.filter(data=>data.userName.toLowerCase().includes(search.toLowerCase())).slice((currentPage-1)*pageSize,currentPage*pageSize)"
            style="width: 100%"
            ref="utable"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form
                  label-position="left"
                  inline
                  class="user-table-expand"
                >
                  <el-form-item label="用户名">
                    <span>{{ props.row.userName }}</span>
                  </el-form-item>

                  <el-form-item label="电话">
                    <span>{{ props.row.phone }}</span>
                  </el-form-item>

                  <el-form-item label="状态">
                    <span>{{ props.row.status === '0'? '启用':'禁用'}}</span>
                  </el-form-item>
                  <el-form-item label="所属部门">
                    <span>{{ props.row.dept }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              label="用户名"
              prop="userName"
              show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column
              label="状态"
              prop="status"
              :formatter="(row)=> row.status ==='0'?'启用':'禁用'"
            >
            </el-table-column>
            <el-table-column
              label="所属部门"
              prop="dept"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column align="right">
              <template
                slot="header"
                slot-scope="scope"
              >
                <el-input
                  v-model="search"
                  size="mini"
                  placeholder="输入关键字搜索"
                />
              </template>
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleConfig(scope.$index, scope.row)"

                >任务配置
                </el-button>

              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pagination"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </el-row>

    <!--添加用户对话框-->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="40%"
      :close-on-click-modal="false"
      :before-close="dialogClose"
      :inline="true"
    >
      <div>

        <el-transfer
          filterable
          :filter-method="filterMethod"
          filter-placeholder="请输入城市拼音"
          v-model="selectedDistData"
          :titles="['可选任务', '已选任务']"
          :props='{key:"_id",label:"name"}'
          :data="distData">
        </el-transfer>

      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button
          type="primary"
          @click="handleConfirm('form')"
          size="small"
        >保存</el-button>
      </span>
    </el-dialog>


  </div>
</template>
<script>
  import {save, getByDist} from '@/api/yxwh/rwpz';  //任务配置api
  import {list} from '@/api/yxwh/xxwh';             //用户
  import {listByDist} from '@/api/yxwh/rwgl';       //总任务
  import Clone from '@/utils/clone';                //克隆类

  export default {
    name:'index',
    data() {
      return {
        tableData: [],                                                              //获取的用户信息集合
        distData:[],
        selectedDistData:[],                                                        //选中的权限（用户拥有的）
        form: {},                                                                   //添加用户关联的用户表单
        search: "",                                                                 //查询用户输入的关键字
        dialogVisible: false,                                                       //添加用户对话框可见控制
        total: 0,                                                                   //用户所有条数
        currentPage: 1,                                                             //显示的用户当前页
        pageSize: 10,                                                               //当前页显示条数
        title:''
      };
    },
    methods: {
      /**
       *
       * @param item
       * @param query
       */
      filterMethod(query, item) {
        return item.name.indexOf(query) > -1;
      },
      //配置
      handleConfig(index, row) {
        this.title = row.userName + "—任务配置"
        this.form = Clone.clone(row);
        this.dialogVisible = true;
        this.index = this.pageSize * (this.currentPage - 1) + index;
        this.getDistData();
        this.getHasDistData();
      },
      //用户对话框关闭
      dialogClose(done) {
        done();
      },
      //添加编辑用户时验证
      handleConfirm() {
        save({uid:this.form._id,tasks:this.selectedDistData}).then(res=>{
          this.$message.success("保存成功!");
          this.dialogVisible = false;
        })
      },

      //翻页条数控制
      handleSizeChange(size) {
        this.pageSize = size;
      },
      //翻页控制
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
      },
      //获取所有用户信息
      getData() {
        list({dist:this.$store.getters.dept}).then(res=>{
          this.tableData = res.data.filter(item=>item.dept !== this.$store.getters.dept);
          this.total = this.tableData.length;
        })
      },
      //获取权限组数据
      getDistData() {
        if(this.distData.length === 0){
          listByDist({dept:this.$store.getters.dept}).then(res=>{
            this.distData = res.data;
          })
        }
      },
      //获取该用户所用户的数据
      getHasDistData(){
        if(this.selectedDistData.length === 0){
          getByDist({uid:this.form._id}).then(res=>{
            this.selectedDistData = res.data ? res.data[0].tasks.map(o=>o._id):[];
          })
        }

      }
    },
    mounted: function () {
      this.getData();
    }
  }
</script>

<style lang="scss" scoped>
  .div-breadcrumb {
    border-radius: 4px;
    min-height: 48px;
    background: #99a9bf;
    display: flex;
    align-items: center;
    font-size: 24px;
  }

  .el-row {
    margin-bottom: 20px;
  }

  .el-row:last-child {
    margin-bottom: 10px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .u-organizationDlg .el-scrollbar {
    height: 200px;
    overflow-x: hidden;
  }

  .el-row {
    margin-bottom: 20px;
  }

  .el-row:last-child {
    margin-bottom: 10px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .u-organizationDlg .el-scrollbar {
    height: 200px;
    overflow-x: hidden;
  }

  .user-table-expand {
    font-size: 0;
  }

  .user-table-expand label {
    width: 90px;
    color: #313bbf;
  }

  .user-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .el-form-item span {
    float: right;
  }
</style>
